<template>
  <div class="s-box">
    <group class="form-content" title="添加持仓" label-width="7.5em" label-margin-right="1em" label-align="left">
      <x-input :disabled="!isAdd" title="买入平台" v-model="position.platformName" required></x-input>
      <x-input :disabled="true" title="产品名" v-model="position.productName" required></x-input>
      <x-input :title="(position.type==='sale'?'卖出单价':'买入单价')+'('+position.currencyType+')'" type="number"
               v-model="position.purchaseUnitPrice"
               required></x-input>
      <x-input :title="position.type==='sale'?'卖出个数':'买入个数'" type="number" v-model="position.unitCount"
               required @input="inputCount">
        <!--<x-button @click.native="saleAll" mini class="sale-all" slot="right" v-if="position.type==='sale'">卖出全部<span
          class="text-red">{{position.showUnitCount}}</span>个
        </x-button>-->
      </x-input>
      <div class="sale-all" v-if="position.type==='sale'">
        <div>可卖<span class="text-red">{{position.showUnitCount}}</span>个</div>
        <div class="checker-box">
          <checker v-model="saleCount" @on-change="updateCount" default-item-class="demo5-item"
                   selected-item-class="demo5-item-selected">
            <checker-item value="1">全仓</checker-item>
            <checker-item value="2">半仓</checker-item>
          </checker>
        </div>

      </div>
      <x-input :title="'手续费'+'('+position.currencyType+')'" type="number" v-model="position.serviceCharge"
               required></x-input>
    </group>
    <div class="my-content" v-if="position.currencyType!=='CNY'">
      汇率：{{position.currencyType}}&nbsp;&nbsp;&nbsp;1 &asymp; {{position.exchangeCNYRate}}&nbsp;&nbsp;&nbsp;CNY
    </div>
    <div class="my-content">
      市值：{{marketValue || '请先填入操作信息'}}
    </div>
    <group>
      <group-title slot="title">说明</group-title>
      <x-textarea placeholder="请填写说明" :show-counter="false" :rows="3" :autosize="true"
                  v-model="position.detail||''"></x-textarea>
    </group>
    <box gap="10px 10px">
      <x-button type="warn" :show-loading="loading" @click.native="submit">提交</x-button>
    </box>
  </div>
</template>

<script>
  import {Group, GroupTitle, XInput, XTextarea, Box, XButton, Toast, Checker, CheckerItem, Divider} from 'vux'

  export default {
    components: {
      GroupTitle,
      Group,
      XInput,
      XTextarea,
      Box,
      XButton,
      Checker,
      CheckerItem,
      Divider
    },
    data() {
      return {
        position: {
          platformName: '',
          productName: '',
          nowUnitPrice: 0,
          purchaseUnitPrice: '',
          unitCount:100,
          serviceCharge: 0
        },
        myPosition: {},
        loading: false,
        isAdd: false,
        saleCount: ''
      }
    },

    created() {

    },
    mounted() {
      this.position = this.$route.query;
      if (this.position.type === 'add') {
        this.getProductInfo();
        this.isAdd = true;
      } else {
        this.getPositionInfo();
        this.isAdd = false;
      }
    },
    computed: {
      marketValue() {
        let total = (parseFloat(this.position.purchaseUnitPrice) * parseFloat(this.position.unitCount) - parseFloat(this.position.serviceCharge)) * parseFloat(this.position.exchangeCNYRate);
        let res = total || '';
        if (res !== '') {
          res = res.toFixed(3);
        }
        return res;
      }
    },

    methods: {
      updateCount(value) {
        if (value === '1') {
          this.position.unitCount = this.position.showUnitCount;
        } else if (value === '2') {
          this.position.unitCount = Math.floor(Number.parseFloat(this.position.showUnitCount) / 2);
        }
      },
      inputCount(item) {
        if (Number.parseFloat(item) === Number.parseFloat(this.position.showUnitCount)) {
          this.saleCount = '1';
        } else if (Number.parseFloat(item) === Math.floor(Number.parseFloat(this.position.showUnitCount) / 2)) {
          this.saleCount = '2';
        } else {
          this.saleCount = '';
        }
      },
      getPositionInfo() {
        this.$api.getPositionInfo(this.position).then(data => {
          this.position.platformName = data.myPosition.platformName;
          this.position.productName = data.myPosition.productName;
          this.position.purchaseUnitPrice = data.myPosition.nowUnitPrice;
          this.position.showUnitCount = data.myPosition.unitCount;
          this.position.currencyType = data.myPosition.currencyType;
          this.position.exchangeCNYRate = data.myPosition.exchangeCNYRate;

        })
      },
      getProductInfo() {
        this.$api.getProductInfo(this.position).then(data => {
          this.position.platformName = data.defaultPlatform;
          this.position.unitCount = 100;
          this.position.serviceCharge = 0;
          this.position.productName = data.financialProduct.productName;
          this.position.purchaseUnitPrice = data.financialProduct.nowPrice;
          this.position.currencyType = data.financialProduct.currencyType;
          this.position.exchangeCNYRate = data.exchangeCNYRate;
        })
      },
      submit() {
        if (!this.position.platformName || !this.position.productName || !this.position.purchaseUnitPrice || !this.position.unitCount || (this.position.serviceCharge!==0&&!this.position.serviceCharge)) {
          this.$vux.toast.show({
            type: 'text',
            text: '除说明外不能为空',
            width: '4rem'
          });
        } else {
          this.loading = true;
          if (this.position.type === 'buy') {
            this.$api.increasePosition(this.position).then((data) => {
              this.loading = false;
              this.$vux.toast.show({
                type: 'text',
                text: data.returnMsg,
                width: '4rem'
              });
              if (data.returnCode === 1) {
                this.$router.back();
              }
            })
          } else if (this.position.type === 'sale') {
            if (parseFloat(this.position.unitCount) > parseFloat(this.position.nowUnitPrice)) {
              this.$vux.toast.show({
                type: 'text',
                text: '超出上限',
                width: '4rem'
              });
              return;
            }
            this.$api.declinePosition(this.position).then((data) => {
              this.loading = false;
              this.$vux.toast.show({
                type: 'text',
                text: data.returnMsg,
                width: 'auto'
              });
              if (data.returnCode === 1) {
                this.$router.back();
              }
            })
          } else {
            this.$api.addPosition(this.position).then((data) => {
              this.loading = false;
              this.$vux.toast.show({
                type: 'text',
                text: data.returnMsg,
                width: '4rem'
              });
              if (data.returnCode === 1) {
                this.$router.go(-2);
              }
            })
          }

        }
      }
    }
  }
</script>

<style lang="less" scoped>

  .my-content {
    padding: 10px 15px 0;
    font-size: .4rem;
  }

  .popover-demo-content {
    padding: 5px 10px;
  }

  .sale-all {
    /*display: inline-block;*/
    /*border: 1px solid #ec1c24;*/
    /*border-radius: 5px;*/
    padding: 10px 15px;
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap:wrap;
    div {
      font-size: .35rem;
      margin-right: .3rem;
    }
    &:before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 15px;
    }
  }

  .demo5-item {
    width: 100px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
    flex: 1;
  }

  .demo5-item-selected {
    background: #ffffff;
    border-color: #ff4a00;
  }

</style>
